import { Button, Form, Input, Card, Space, message } from 'antd'
import {
  reqAddHospitalSet,
  reqGetOneHospitalSet,
  reqUpdateHospotalSet,
} from '@api/hospitalSet'
import { useNavigate, useParams } from 'react-router-dom'
import { useEffect } from 'react'
export default function HospitalSetAddOrUpdate() {
  //如果修改医院设置,则一旦这个组件挂载就立刻发送请求,获取指定医院信息
  // 获取传递的医院id
  const { id } = useParams()
  // 创建form实例
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const onFinish = async (values: any) => {
    // 由于添加和修改是同一个保存按钮,所以点击保存之后,要先判断是添加还是修改
    // 判断依据: 有id就是修改,没有id就是添加
    if (id) {
      // 注意: 修改医院时,需要额外传给服务器一个医院的id.但是values中没有,所以给values中添加一个id
      values.id = id
      await reqUpdateHospotalSet(values)
      message.success('医院设置修改成功')
    } else {
      // console.log('Success:', values)
      // 发送请求添加医院设置
      await reqAddHospitalSet(values)
      // 如果能指向到await后面,表示添加的请求响应成功,并且操作也成功
      // 添加全局提示
      message.success('医院设置添加成功')
    }
    // 跳转到医院设置页面
    navigate(-1)
  }

  // 如果id有值,那就是修改医院,如果id没有值,就是添加医院
  useEffect(() => {
    if (id) {
      //发送请求获取指定医院信息
      ;(async function () {
        const result = await reqGetOneHospitalSet(id)
        //将获取到的医院信息,渲染到表单中
        form.setFieldsValue(result)
      })()
    }
  }, [])

  return (
    <Card>
      <Form
        form={form} //Form组件和form实例绑定
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        onFinish={onFinish}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请输入医院名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编码"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编码' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人名称"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: '请输入联系人手机号' },
            // pattern用来配置正则
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
            <Button
              onClick={() => {
                navigate(-1)
              }}
            >
              返回
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  )
}
